<!doctype html>
<html lang="en">
<head>
	<title>lil-gui - Basic Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<script type="module">

		import GUI from '../../dist/lil-gui.esm.js';
		const gui = new GUI({
			horizontal:true
		});

		const folder = gui.addFolder( 'Folder1' );
		folder.open();

		const folderParams = {
			number: 0.5,
			boolean: false,
			color: '#0cf',
			function() { console.log( 'hi' ) }
		};

		folder.add( folderParams, 'number', 0, 1 );
		folder.addFieldset("测试") ;
		folder.add( folderParams, 'boolean' );
		folder.addColor( folderParams, 'color' );
		folder.clearFieldset() ;
		folder.add( folderParams, 'function' );

		const params = {
			options: 10,
			options2: "1",
			optionsAndBtn: 10,
			boolean: true,
			string: 'lil-gui',
			number: 0,
			color: '#aa00ff',
			function() { console.log( 'hi' ) },
			picObj:{
				controllerType:1,   //1 表示图片
				enable:true,
				imageUrl:"http://www.webgl3d.cn/img/logo.png",
				click:function(controller,obj){
					console.log(controller,obj,this) ;
					alert("点击上传图片") ;
				},
				btnTxt:'配置',
				btnClick:function(controller,obj){
					console.log(controller,obj,this) ;
					alert("按钮点击") ;
				},
				numberObj:{
					value:1,
					tooltip:"数字控件提示",
					onChange:function(value,value2,input,controller){
						console.log("数字改变：",value,value2,input,controller) ;
					}
				}
			},
			vector:{x:0,y:0,z:0},
			textarea:'',
			booleanMore:{
				flag1:true,
				flag1_label:"接收",
				flag2:false,
				flag2_label:"多选2",
				flag3:false,
				flag3_label:"多选3",
				flag4:false,
				flag4_label:"多选4"
			},
			label:"文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本"
		};

		const folder2 = gui.addFolder( 'Folder2' ,{horizontal:false});
		folder2.add( params, 'options', { Small: 1, Medium: 10, Large: 100 } );
		folder2.add( params, 'boolean' );
		folder2.add( params, 'string' ).nameTip();


		const folder21 = folder2.addFolder( 'Folder21');
		folder21.add( params, 'options', { Small: 1, Medium: 10, Large: 100 } );
		folder21.add( params, 'boolean' );
		folder21.add( params, 'string' ).nameTip();


		const folder22 = folder2.addFolder( 'Folder22' );
		folder22.add( params, 'options', { Small: 1, Medium: 10, Large: 100 } );
		folder22.add( params, 'string' ).nameTip();

		const folder3 = gui.addFolder( 'Folder3' );
		folder3.add( params, 'number' );
		folder3.addColor( params, 'color' );
		folder3.add( params, 'function' ).name( 'Custom Name' );




		gui.add( params, 'string' ).nameTip();
		gui.add( folderParams, 'boolean' );


	</script>
</body>
</html>
